.vp-code-tabs-nav {
  overflow-x: auto;

  margin: 0.75rem 0 -0.75rem;
  padding: 0;
  border-radius: var(--code-border-radius) var(--code-border-radius) 0 0;

  background: var(--code-tabs-c-bg);
  list-style: none;

  white-space: nowrap;

  transition: background var(--vp-t-color);

  @media print {
    display: none;
  }
}

.vp-code-tab-nav {
  position: relative;

  min-width: 3rem;
  margin: 0;
  padding: 6px 12px;
  border-width: 0;
  border-radius: var(--code-border-radius) var(--code-border-radius) 0 0;

  background: transparent;
  color: var(--code-tabs-c-text);

  font-weight: 600;
  font-size: 0.875em;
  line-height: 1.4;

  cursor: pointer;

  transition:
    background var(--vp-t-color),
    color var(--vp-t-color);

  &:hover {
    background: var(--code-tabs-c-hover);
  }

  &::before,
  &::after {
    content: ' ';

    position: absolute;
    bottom: 0;
    z-index: 1;

    width: var(--code-border-radius);
    height: var(--code-border-radius);
  }

  &::before {
    right: 100%;
  }

  &::after {
    left: 100%;
  }

  &.active {
    background: var(--code-c-bg, var(--vp-c-bg-alt));

    &::before {
      background: radial-gradient(
        12px at left top,
        transparent 50%,
        var(--code-c-bg) 50%
      );
    }

    &::after {
      background: radial-gradient(
        12px at right top,
        transparent 50%,
        var(--code-c-bg) 50%
      );
    }
  }

  &:first-child {
    &::before {
      display: none;
    }

    [dir='rtl'] & {
      &::before {
        display: block;
      }

      &::after {
        display: none;
      }
    }
  }
}

.vp-code-tab {
  display: none;

  @media print {
    display: block;
  }

  &.active {
    display: block;
  }
}

.vp-code-tab-title {
  display: none;
  font-weight: 500;

  @media print {
    display: block;
  }
}
